/* 主页index.html的样式表 */

/* 顶部导航条的容器 */
.topbar-wrapper{
    /* 设置宽度全屏 */
    width: 100%;
    /* 设置高度和行高 */
    height: 40px;
    line-height: 40px;
    /* 设置背景颜色 */
    background-color: #333;
}
/* 设置超链接的颜色 */
.topbar a{
    font-size: 12px;
    color: #b0b0b0;
    display: block;
}

/* 设置超链接移入的效果 */
.topbar a:hover{
    color: #fff;
}

/* 设置中间分割线 */
.topbar .line{
    font-size: 12px;
    color: #424242;
    margin: 0 8px;
}

/* 设置左侧导航栏 */
.service, .topbar li{
    float: left;
}

.app{
	position:relative;
}

.app::after{
	content:'';
	position:absolute;
	display:none;
	width:0;
	height:0;
	border:7px solid transparent;
	border-top:none;
	border-bottom-color:#fff;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}



.app .qrcode{
	display:none;
	position:absolute;
	left:-40px;
	width:124px;
	height:148px;
	line-height:1;
	text-align:center;
	background-color:#fff;
	box-shadow:0 0 10px rgba(0,0,0,.3)
	/* transition: 用于为样式设置过渡效果 */
    transition: height 0.3s;

    z-index: 9999;
}

.app:hover .qrcode,
.app:hover::after{
	display:block;
}

.app .qrcode img{
	width:90px;
	margin:17px;
	margin-bottom:10px;
}

.app .qrcode span{
	color:#000;
	font-size:14px;
}

/* 设置右侧导航栏 */
.shop-cart, .user-info{
    float: right;
}

.shop-cart{
    margin-left: 26px;
}

/* 设置购物车的样式 */
.shop-cart a{
    width: 120px;
    background-color: #424242;
    text-align: center;
}

.shop-cart:hover a{
    background-color: #fff;
    color: #FF6700;
}

.shop-cart i{
    margin-right: 2px;
}